<template>
  <div class="home">
    <Nav title="分类" router="/home"></Nav>
    <div class="content">
      <!-- 左侧菜单栏 -->
      <div class="left">
        <van-sidebar v-model="activeKey" @change="putIndex">
          <div class="left_item" v-for="(goodsTitle, index) in sidebar" :key="index">
            <van-sidebar-item :title="goodsTitle.title" />
          </div>
        </van-sidebar>
      </div>
      <div class="right" v-if="activeKey === 0">
        <img src="@/assets/images/Sort/header01.jpg" />
        <div class="title">
          <strong>——</strong>
          手机
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoPhone" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          智能
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoIntell" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          家电
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoTele" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="footer"></div>
      </div>
      <div class="right" v-else-if="activeKey === 1">
        <img src="@/assets/images/Sort/header02.png" />
        <div class="title">
          <strong>——</strong>
          智能
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoIntell" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          家电
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoTele" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          手机
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoPhone" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="right" v-else-if="activeKey === 2">
        <img src="@/assets/images/Sort/header03.webp" />
        <div class="title">
          <strong>——</strong>
          家电
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoTele" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          智能
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoIntell" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          手机
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoPhone" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="right" v-else>
        <img src="@/assets/images/Sort/header01.jpg" />
        <div class="title">
          <strong>——</strong>
          智能
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoIntell" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          家电
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoTele" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="title">
          <strong>——</strong>
          手机
          <strong>——</strong>
        </div>
        <div class="content_right">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(goods, index) in goodsInfoPhone" :key="index">
              <img :src="goods.url" />
              <div class="info">{{goods.title}}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from '@/components/Nav/Nav.vue'

export default {
  components: {
    Nav
  },
  data() {
    return {
      activeKey: 0,
      sidebar: [
        {
          title: '新品'
        },
        {
          title: '众筹'
        },
        {
          title: '小米手机'
        },
        {
          title: 'Redmi'
        },
        {
          title: '黑鲨'
        },
        {
          title: '5G合约'
        },
        {
          title: '手机配件'
        },
        {
          title: '电视'
        },
        {
          title: '大家电'
        },
        {
          title: '电脑办公'
        },
        {
          title: '小爱智能'
        },
        {
          title: '路由器'
        },
        {
          title: '生活电器'
        },
        {
          title: '厨房电器'
        },
        {
          title: '智能穿戴'
        },
        {
          title: '智能家居'
        },
        {
          title: '车载出行'
        },
        {
          title: '个护健康'
        },
        {
          title: '数码配件'
        },
        {
          title: '日用百货'
        },
        {
          title: '有品精选'
        },
        {
          title: '服务'
        },
        {
          title: '米粉卡'
        },
        {
          title: '全部商品'
        },
        {
          title: '零售店'
        }
      ],
      goodsInfoPhone: [
        {
          url: require('@/assets/images/Sort/phone01.png'),
          title: 'Redmi 9'
        },
        {
          url: require('@/assets/images/Sort/phone02.png'),
          title: '10X 4G'
        },
        {
          url: require('@/assets/images/Sort/phone03.png'),
          title: '10X 5G系列'
        },
        {
          url: require('@/assets/images/Sort/phone04.png'),
          title: '小米10 青春'
        },
        {
          url: require('@/assets/images/Sort/phone05.png'),
          title: 'K30 Pro 变焦版'
        },
        {
          url: require('@/assets/images/Sort/phone06.png'),
          title: 'K30 Pro'
        },
        {
          url: require('@/assets/images/Sort/phone07.png'),
          title: '黑鲨手机3'
        },
        {
          url: require('@/assets/images/Sort/phone08.png'),
          title: '黑鲨手机3 Pro'
        },
        {
          url: require('@/assets/images/Sort/phone09.png'),
          title: '小米10 Pro'
        },
        {
          url: require('@/assets/images/Sort/phone10.png'),
          title: '小米10'
        },
        {
          url: require('@/assets/images/Sort/phone11.png'),
          title: '小米MIX Alpha'
        }
      ],
      goodsInfoIntell: [
        {
          url: require('@/assets/images/Sort/intell01.png'),
          title: '小米手环5'
        },
        {
          url: require('@/assets/images/Sort/intell02.png'),
          title: '手表Color'
        },
        {
          url: require('@/assets/images/Sort/intell03.png'),
          title: '小米手表'
        },
        {
          url: require('@/assets/images/Sort/intell04.png'),
          title: '移动电源3'
        },
        {
          url: require('@/assets/images/Sort/intell05.png'),
          title: '米家电子体温计'
        },
        {
          url: require('@/assets/images/Sort/intell06.png'),
          title: '路由器AX3600'
        },
        {
          url: require('@/assets/images/Sort/intell07.png'),
          title: '加湿器'
        }
      ],
      goodsInfoTele: [
        {
          url: require('@/assets/images/Sort/tele01.png'),
          title: '电视5 55"'
        },
        {
          url: require('@/assets/images/Sort/tele02.png'),
          title: 'Redmi电视 70"'
        },
        {
          url: require('@/assets/images/Sort/tele03.png'),
          title: '电视Pro 55"'
        },
        {
          url: require('@/assets/images/Sort/tele04.png'),
          title: '空调X（大一匹）'
        },
        {
          url: require('@/assets/images/Sort/tele05.png'),
          title: '柔风空调'
        },
        {
          url: require('@/assets/images/Sort/tele06.png'),
          title: '洗烘一体机1C'
        },
        {
          url: require('@/assets/images/Sort/tele07.png'),
          title: 'Redmi 电视 98"'
        }
      ]
    }
  },
  methods: {
    putIndex() {}
  }
}
</script>
<style scoped>
.content {
  margin-top: 1.8rem;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.left {
  width: 23vw;
  overflow: auto;
  float: left;
  height: 100%;
}
.right {
  width: 77vw;
  float: left;
  overflow: auto;
  background-color: #fff;
  height: 100%;
}
.footer {
  height: 3rem;
}
.right img {
  width: 9rem;
  display: block;
  margin: 0.4rem auto;
}
.right .title {
  font-size: 0.5rem;
  text-align: center;
  margin-top: 1rem;
  color: #666;
}
.right .title strong {
  color: #efefef;
  font-weight: 600;
}
.right .content_right {
  margin-top: 0.5rem;
}
.right .content_right img {
  width: 65%;
}
.right .content_right .info {
  font-size: 0.41rem;
  width: 2.8rem;
  text-align: center;
  color: #757575;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
